<template>
  <div class="container">
    <div class="steps-wrapper">
      <el-steps :active="activeStep" align-center>
        <el-step title="任务描述" icon="el-icon-s-promotion" />
        <el-step title="选择用户组" icon="el-icon-s-custom" />
        <el-step title="素材管理" icon="el-icon-picture" />
      </el-steps>
    </div>

    <tweet-task-step1
      v-if="activeStep === 0"
      :is-edit="true"
    />
    <tweet-task-step2
      v-if="activeStep === 1"
      :is-edit="true"
    />
    <tweet-task-step3
      v-if="activeStep === 2"
      :is-edit="true"
    />
  </div>
</template>

<script>
import TweetTaskStep1 from './templates/TaskStep1'
import TweetTaskStep2 from './templates/TaskStep2'
import TweetTaskStep3 from './templates/TaskStep3'

export default {
  name: 'TweetEdit',
  components: {
    TweetTaskStep1,
    TweetTaskStep2,
    TweetTaskStep3
  },
  data() {
    return {
      activeStep: 0
    }
  },
  watch: {
    $route: {
      handler(route) {
        if (!this._.isEmpty(route.query.step)) {
          this.activeStep = parseInt(route.query.step) - 1
        } else {
          this.activeStep = 0
        }
      },
      immediate: true
    }
  },
  created() {
    if (!this._.isEmpty(this.$route.query.step)) {
      this.activeStep = parseInt(this.$route.query.step) - 1
    } else {
      this.activeStep = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.steps-wrapper {
  padding: 40px 140px;
}
</style>
